<template>
  <el-dialog
    custom-class="alarm-dialog lizhi"
    title="移动端APP下载"
    :visible="show"
    width="max-content"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :show-close="false"
    append-to-body
  >
    <div class="alarm-close" @click="closeDialog">
      <i class="el-icon-close"></i>
    </div>
    <div v-loading="loading" class="alarm-handler">
      <div class="codeimg-group">
        <div
          class="codeimg-item"
          v-for="(item, index) in codeList"
          :key="index"
        >
          <img :src="item.value" />
          <p>{{ item.label }}</p>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import API from "api/api.js";
export default {
  name: "AppDownload",
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      codeList: [],
      loading: true
    };
  },
  watch: {
    // 当show变更时, if show为true,则初始化表单, 反之重置表单
    show: function (val) {
      if (val) {
        let self = this;
        this.$nextTick(() => {
          self.init();
        });
      }
    }
  },
  methods: {
    /**
     * @description: 获取二维码
     * @return {*}
     */
    init() {
      this.loading = false
      API.remoteGet({ type: "code_type" }).then((response) => {
        const code = response.code;
        if (code === 0) {
          this.codeList = response.data;
          console.log(codeList);
          this.loading = true
        }
      });
    },
    /**
     * @description: 关闭弹窗时向父组件发送自定义 show更新 事件
     * @return {*}
     */
    closeDialog() {
      //当面板关闭(点击关闭按钮)
      this.$emit("update:show", false);
    }
  }
};
</script>
<style lang="scss" scope>
.lizhi.alarm-dialog {
  .alarm-close {
    position: absolute;
    font-size: 18px;
    top: 20px;
    right: 20px;
    cursor: pointer;
  }
  .alarm-title {
    font-size: 18px;
    color: #02c3ff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .alarm-handler {
    min-width: 300px;
    .codeimg-group {
      display: flex;
      justify-content: center;
	  padding: 0 50px;
      .codeimg-item {
        padding: 0 10px;
        img {
          width: 200px;
        }
        p {
		  margin-top: 10px;
          text-align: center;
          font-size: 16px;
		  color: rgba(255,255,255,0.7);
        }
      }
    }
  }
}
</style>
